<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <div class="container">
          <div class="container-section" style="margin-bottom:30px">
            <Description></Description>
          </div>
          <Row style="margin-bottom:20px">
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item">
                  <img src="../../../../assets/img/cpshome/01.png" height="40" width="46"/>
                  用电情况
                </div>
                <div class="use-info-details">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月电量：</span>
                    {{userInfoData.bydl| noDataFormat }}千瓦时
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月电费：</span>
                    {{userInfoData.bydf| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">电费均价：</span>
                    {{userInfoData.dfjj| noDataFormat }}元/千瓦时
                  </div>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item" style="background: rgba(146, 214, 108, 1)">
                  <img src="../../../../assets/img/cpshome/02.png" />
                  天然气使用情况
                </div>
                <div class="use-info-details" style="background: rgba(146, 214, 108, 0.04)">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月用气量：</span>
                    {{userInfoData.byyql| noDataFormat }}立方米
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月燃气费：</span>
                    {{userInfoData.byrqf| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">燃气费均价：</span>
                    {{userInfoData.rqfjj| noDataFormat }}元/立方米
                  </div>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item" style="background: rgba(254, 152, 52, 1)">
                  <img src="../../../../assets/img/cpshome/04.png" />
                  蒸气使用情况
                </div>
                <div class="use-info-details" style="background: rgba(254, 152, 52, 0.04)">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月蒸汽量：</span>
                    {{userInfoData.byzql| noDataFormat }}吨
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月蒸汽费：</span>
                    {{userInfoData.byzqf| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">蒸汽费均价：</span>
                    {{userInfoData.dfjj| noDataFormat }}元/吨
                  </div>
                </div>
              </div>
            </Col>
          </Row>
          <Row style="margin-bottom:90px">
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item" style="background: rgba(112, 218, 182, 1)">
                  <img src="../../../../assets/img/cpshome/04.png" />
                  水使用情况
                </div>
                <div class="use-info-details" style="background: rgba(112, 218, 182, 0.04)">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月用水量：</span>
                    {{userInfoData.byysl| noDataFormat }}立方米
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月水费：</span>
                    {{userInfoData.bysf| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">水费均价：</span>
                    {{userInfoData.sfjj| noDataFormat }}元/立方米
                  </div>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item" style="background: rgba(255, 218, 116, 1)">
                  <img src="../../../../assets/img/cpshome/05.png" />
                  光伏使用情况
                </div>
                <div class="use-info-details" style="background: rgba(255, 218, 116, 0.04)">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月发电量：</span>
                    {{userInfoData.gfbyfdl| noDataFormat }}千瓦时
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月发电收益：</span>
                    {{userInfoData.gfbyfdsy| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">合同均价：</span>
                    {{userInfoData.gfhtjj| noDataFormat }}元/立方米
                  </div>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="use-info-box">
                <div class="use-info-item" style="background: rgba(252, 128, 126, 1)">
                  <img src="../../../../assets/img/cpshome/06.png" />
                  风电使用情况
                </div>
                <div class="use-info-details" style="background: rgba(252, 128, 126, 0.04)">
                  <div>
                    <span style="color:rgba(154, 154, 154, 1)">本月发电量：</span>
                    {{userInfoData.fdbyfdl| noDataFormat }}千瓦时
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">本月发电收益：</span>
                    {{userInfoData.fdbyfdsy| noDataFormat }}元
                  </div>
                  <div><span style="color:rgba(154, 154, 154, 1)">合同均价：</span>
                    {{userInfoData.fdhtjj| noDataFormat }}元/立方米
                  </div>
                </div>
              </div>
            </Col>
          </Row>
          <Row>
            <Col :xxl="8" :lg="12" :md="24">
              <div class="container-section">
                <div class="container-title">
                  告警信息
                </div>
                <div class="">
                  <Draw></Draw>
                </div>
              </div>
            </Col>
            <Col :xxl="16" :lg="12" :md="24" >
              <div class="container-section">
                <div class="container-title">
                  用能信息
                </div>
                <div class="">
                  <Echart></Echart>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import Description from "./description";
import Draw from "./draw";
import Echart from "./echart";
import { getEnergyInfo } from '@/api/scada'

export default {
    name: "coldHotElectric",
    props: {},
    data() {
        return {
            userInfoData: {}
        };
    },
    computed: {},
    created() {
    },
    mounted() {
        getEnergyInfo().then(res => {
            let arr = [];
            if (res.code === 200) {
                this.userInfoData = res.result;
            }
        })
    },
    watch: {},
    methods: {
        format(value) {
            return value != null ? value : "-";
        }
    },
    components: {
        Description,
        Draw,
        Echart
    }
};
</script>

<style scoped lang="scss">
  .use-info-box {
    display: flex;
    justify-content: flex-start;
    .use-info-item {
      width: 138px;
      height: 124px;
      background: #48A4F8;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
    }
    .use-info-details {
      width: 242px;
      height: 124px;
      background: rgba(72, 164, 248, 0.04);
      display: flex;
      justify-content: space-around;
      padding: 20px 0 20px 16px;
      flex-direction: column;
      align-items: flex-start;
      color: #666;

    }
  }

  .bg-style {
    background-size: contain;
    width: 100%;
    height: 100%;
  }

  .container {
    padding: 20px;
    overflow: auto;
    height: 100%;
  }

  .container-title {
    padding-left: 10px;
    font-size: 16px;
    color: #333;
    position: relative;
  }

  .container-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0893fd;
    line-height: 16px;
  }

  .container-content {
    padding: 20px;
  }
</style>
